<template>
  <view>
    <AtModal
      :is-opened="show"
      class="modal-message-container"
      :close-on-click-overlay="false"
    >
      <view class="modal-message">
        <view
          v-show="showClose"
          class="modal-message__img"
        >
          <image
            :src="MODAL_DEL_ICON"
            @tap="$emit('update:show',false)"
          />
        </view>
        <view class="modal-message__content">
          <view>{{ modalOption.title }}</view>
          <view
            v-show="showClose && canRepairTimes"
            class="modal-message__content--sub-text"
          >
            {{ modalOption.subText }}
          </view>
        </view>
        <view class="modal-message__handle">
          <!-- <view class="modal-message__handle--cancel">取消</view> -->
          <view
            class="modal-message__handle--ok"
            @tap="modalOption.ok()"
          >
            {{ modalOption.okText }}
          </view>
        </view>
      </view>
    </AtModal>
  </view>
</template>

<script>
import { AtModal, AtModalContent, AtModalAction } from 'taro-ui-vue'
import { repairClockCheck } from '_api/clock-in'
import { MODAL_DEL_ICON } from '@/config/clock-in'
import Taro from '@tarojs/taro'
/* 补签按钮操作步骤 */
/* step 1 继续 */
const STEP_NEXT = 1
/* step 2 错误或者正确跳转 */
const STEP_OVER = 2
export default {
  components: {
    AtModal
  },
  props: {
    themeId: {
      type: [String, Number],
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    canRepairTimes: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      /* 关闭图标 */
      MODAL_DEL_ICON,
      modalOption: {
        title: "2朵公益花朵可补签一次，确认补签？",
        subText: `注：本活动只能补签${this.canRepairTimes}次`,
        okText: '继续',
        ok: this.repairClock
      },
      /**
       * 1.点击补签 弹出确认窗口
       * 2.错误或或继续
       */
      step: STEP_NEXT
    }
  },
  computed: {
    /* 显示关闭按钮 */
    showClose () {
      return this.step === STEP_NEXT
    }
  },
  watch: {
    canRepairTimes (n) {
      console.log('dhsauidgasuidgusdguisgdiu', n)
      n && (this.modalOption.subText = `注：本活动只能补签${n}次`)
    }
  },
  methods: {
    /*补签成功 */
    toClockIn (data) {
      /**
       * reissue -- 补签标识
       */
      this.$emit('update:show', false)
      Taro.navigateTo({
        url: `/pages/clock-in/index?id=${this.themeId}&reissue=${1}`,
      })
      /*  this.closeModal()
       Taro.showToast({ title: "补签成功", icon: "none" })
       this.$emit('reissueClockSuccess', data) */
    },
    /* 关闭弹窗 */
    closeModal () {
      this.$emit('update:show', false)
    },
    /* 补签操作 */
    async repairClock () {
      repairClockCheck({ theme_id: this.themeId })
        .then(data => {
          if (data.data) {
            this.toClockIn(data)
            this.$emit('canReissueStatus', true)
          }
        })
        .catch(e => {
          console.log(e, 'djdagidy')
          this.step = STEP_OVER
          this.modalOption.title = e.message
          this.modalOption.okText = '我知道了'
          this.modalOption.ok = this.closeModal
          /* 抛出可以补签事件 */
          this.$emit('canReissueStatus', false)
        })
    }
  }
}
</script>


<style lang="scss">
@import "@/assets/scss/tools.scss";
@import "@/assets/scss/theme.scss";
/* $reissueBtnBg : 'https://cdn-habitv5.xaxthk.cn/font-static/ARROWS_LEFT.png'; */
.clock-reissue {
  padding: 0 30px;
  position: fixed;
  bottom: 16px;
  width: 100%;
  &__btn {
    width: 100%;
    height: 88px;
    @include setBgi(
      "https://xthk.oss-cn-shenzhen.aliyuncs.com/teach/1607061444286_0.5680677608705191_button-bg.png"
    );
    @include btnStyle;
    @include normal-flex;
  }
}
.at-modal__container {
  width: 560px;
  .modal-message {
    width: 560px;
    text-align: center;
    box-sizing: border-box;
    &__img {
      text-align: right;
      > image {
        width: 36px;
        height: 36px;
        transform: translateX(-30px) translateY(30px);
      }
    }
    &__content {
      width: 100%;
      padding: 48px 56px;
      color: $text-color-primary;
      font-size: 32px;
      &--sub-text {
        color: $text-color-secondary;
        font-size: 28px;
        margin-top: 16px;
      }
    }
    &__handle {
      width: 100%;
      height: 108px;
      font-size: 30px;
      @include normal-flex;
      border-top: 1px solid #f3f3f3;
      > view {
        height: 100%;
        flex: 1;
        @include normal-flex;
      }
      &--ok {
        color: #ff8000;
      }
    }
  }
}
</style>